<!DOCTYPE html>
<html <?php language_attributes(); ?>>

<!--Google Fonts-->
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic' rel='stylesheet' type='text/css'>

<!--[if IE 7 ]>    <html class= "ie7"> <![endif]-->
<!--[if IE 8 ]>    <html class= "ie8"> <![endif]-->
<!--[if IE 9 ]>    <html class= "ie9"> <![endif]-->

<!--[if lt IE 9]>
   <script>
      document.createElement('header');
      document.createElement('nav');
      document.createElement('section');
      document.createElement('article');
      document.createElement('aside');
      document.createElement('footer');
   </script>
<![endif]--><head>
<title><?php echo get_option('blogname'); ?><?php wp_title(); ?></title>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

<?php if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script( 'comment-reply' ); ?>

<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />

 <!-- *************************************************************************
*****************                FAVICON               ********************
************************************************************************** -->
<?php 
if ( function_exists( 'get_option_tree') ) {
  $favicon = get_option_tree( 'vn_favicon' );
}
?>
<link rel="shortcut icon" href="<?php echo ($favicon); ?>" />

  <!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<?php wp_head(); ?>

 <!-- *************************************************************************
*****************        RESPONSIVE MENU SELECT        ********************
************************************************************************** -->
<!--
<script type="text/javascript">
// DOM ready
jQuery(document).ready(function(){

// Create the dropdown base
jQuery("<select />").appendTo("#topmenu");

// Create default option "Go to..."
jQuery("<option />", {
 "selected": "selected",
 "value"   : "",
 "text"    : "Menu Selection..."
}).appendTo("#topmenu select");

// Populate dropdown with menu items
jQuery("#topmenu a").each(function() {
var el = jQuery(this);
jQuery("<option />", {
   "value"   : el.attr("href"),
   "text"    : el.text()
}).appendTo("#topmenu select");
});

// To make dropdown actually work
// To make more unobtrusive: http://css-tricks.com/4064-unobtrusive-page-changer/
jQuery("#topmenu select").change(function() {
window.location = jQuery(this).find("option:selected").val();
});

});
</script>
-->
<script type="text/javascript">
	var slider = newSlider();
	function newSlider(){
		var obj = new Object;
		obj.open = 0;
		obj.subMenuOpen = 0;
		obj.drawerWidth = 0;
		obj.mainDrawer = null;
		obj.slideMenu = slideMenu;
		function slideMenu(){
			var pageContent = document.getElementById("pageContent");
			if (slider.open){
				pageContent.style.webkitTransform = "translateX(0px)";
				slider.open = 0;
			} else{
				pageContent.style.webkitTransform = "translateX("+slider.drawerWidth+"px)";
				slider.open = 1;
			}
		}
		obj.init = init;
		function init(){
			slider.drawerWidth = document.getElementById("mainSliderDrawer").offsetWidth;
			slider.mainDrawer = document.getElementById("mainSliderDrawer");
		}
		return obj;
	}
</script>


 <!-- *************************************************************************
*****************              TWITTER FEED            ********************
************************************************************************** -->
<?php 
if ( function_exists( 'get_option_tree') ) {
  $twitter = get_option_tree( 'vn_twitter_username' );
}
?>
<script type='text/javascript'>
    jQuery(document).ready(function(){
        jQuery(".tweet").tweet({
            username: "<?php echo $twitter; ?>",
            join_text: "auto",
            avatar_size: 0,
            count: 3,
            auto_join_text_default: "we said,", 
            auto_join_text_ed: "we",
            auto_join_text_ing: "we were",
            auto_join_text_reply: "we replied to",
            auto_join_text_url: "we were checking out",
            loading_text: "loading tweets..."
        });
    });
</script>



<!-- *************************************************************************
******************   THIS IS THE SLIDER           ***********************
************************************************************************** -->
<script type="text/javascript">
jQuery(window).load(function() {
	jQuery('.slider').flexslider();
});



(function($){ 
     $.fn.extend({  
         tabify: function( callback ) {
         	
			function getHref(el){
				hash = $(el).find('a').attr('href');
				hash = hash.substring(0,hash.length-4);
				return hash;
			}
			
		 	function setActive(el){
		 		
				$(el).addClass('active');
				$(getHref(el)).show();
				$(el).siblings('li').each(function(){
					$(this).removeClass('active');
					$(getHref(this)).hide();
				});
			}
			
			return this.each(function() {
			
				var self = this;
				var	callbackArguments 	=	{'ul':$(self)};
					
				$(this).find('li a').each(function(){
					$(this).attr('href',$(this).attr('href') + '-tab');
				});
				
				function handleHash(){
					
					if(location.hash && $(self).find('a[href=' + location.hash + ']').length > 0){				
						setActive($(self).find('a[href=' + location.hash + ']').parent());
					}
				}
				
				if(location.hash){
					handleHash();
				}
					
				setInterval(handleHash,100);
				
				$(this).find('li').each(function(){
					if($(this).hasClass('active')){
						$(getHref(this)).show();
					} else {
						$(getHref(this)).hide();
					}
				});
				
				if(callback){
					callback(callbackArguments);
				}	
				
            }); 
        } 
    }); 
})(jQuery);
	
</script>


 <!-- *************************************************************************
*****************             ACCENT COLOR            ********************
************************************************************************** -->
<?php 
if ( function_exists( 'get_option_tree') ) {
  $headerbgroundimg = get_option_tree( 'vn_headerbgroundimg' );
  $headerrepeat = get_option_tree( 'vn_headerrepeat' );
  $headerbackgroundcolor = get_option_tree( 'vn_headerbackgroundcolor' );
  $topborder = get_option_tree( 'vn_topbottombordercolor' );
  $headermenubackgroundcolor = get_option_tree( 'vn_headermenubackgroundcolor' );
  $headermenubgroundimg = get_option_tree( 'vn_headermenubgroundimg' );
  $headermenurepeat = get_option_tree( 'vn_headermenurepeat' );
  $bodybackgroundcolor = get_option_tree( 'vn_bodybackgroundcolor' );
  $bodybgroundimg = get_option_tree( 'vn_bodybgroundimg' );
  $bodyrepeat = get_option_tree( 'vn_bodyrepeat' );
  $color1 = get_option_tree( 'vn_color1' );
  $color2 = get_option_tree( 'vn_color2' );
  $color3 = get_option_tree( 'vn_color3' );
  $color4 = get_option_tree( 'vn_color4' );
  $contentbgroundimg = get_option_tree( 'vn_contentbgroundimg' );
  $contentbackgroundcolor = get_option_tree( 'vn_contentbackgroundcolor' );
  $contentrepeat = get_option_tree( 'vn_contentrepeat' );
  $topbgroundimg = get_option_tree( 'vn_topbgroundimg' );
  $topbgroundcolor = get_option_tree( 'vn_topbgroundcolor' );
  $color5 = get_option_tree( 'vn_color5' );
}
?>

<style type="text/css">
	
#pageContent{
	background-image:url('<?php echo ($bodybgroundimg);?>');
	background-repeat:<?php echo ($bodyrepeat); ?>;
	background-color:<?php echo ($bodybackgroundcolor);?>
}	
	
.headerwrapper {
	background-image:url('<?php echo ($headerbgroundimg);?>');
	background-repeat:<?php echo ($headerrepeat); ?>;
	background-color:<?php echo ($headerbackgroundcolor);?>
	}
	
#topborder, #footerborder {
	border-top:5px solid <?php echo ($topborder);?>
	}
	
#topmenu_wrapper {
	background-image:url('<?php echo ($headermenubgroundimg);?>');
	background-repeat:<?php echo ($headermenurepeat); ?>;
	background-color:<?php echo ($headermenubackgroundcolor);?>
	}
	
.topRightMenuWrapper {
	width: 100%;
	}	
	
#topRightMenu {
	background-image:url('<?php echo ($headermenubgroundimg);?>');
	background-repeat:<?php echo ($headermenurepeat); ?>;
	background-color:<?php echo ($headermenubackgroundcolor);?>
	}
	
.sf-menu li ul li {
	background-image:url('<?php echo ($headermenubgroundimg);?>');
	background-repeat:<?php echo ($headermenurepeat); ?>;
	background-color:<?php echo ($headermenubackgroundcolor);?>
	}
	
.bdywrapper, #outer_footer_wrapper {
	background-image:url('<?php echo ($bodybgroundimg);?>');
	background-repeat:<?php echo ($bodyrepeat); ?>;
	background-color:<?php echo ($bodybackgroundcolor);?>
	}
	
.slider_wrapper, .slider_wrapper2, .slider_wrapper3 {
	background-image:url('<?php echo ($topbgroundimg);?>');
	background-repeat:repeat;
	background-color:<?php echo ($topbgroundcolor);?>;
	}

ul li a, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, a, .meta a:hover, .one_half a, .one_half_first a, .one_third a, .one_third_first a, .two_third a, .two_third_first a, .one_fourth a, .one_fourth_first a, .three_fourth a, .three_fourth_first a, .one_fifth a, .one_fifth_first a, .two_fifth a, .two_fifth_first a, .three_fifth a, .three_fifth_first a, .four_fifth a, .four_fifth_first a, .one_sixth a, .one_sixth_first a, .social_share_links a, .event_block .meta a:hover, .meta span a:hover, .copyright_message a:hover, ul.icons li a:hover, .at, .tweet_text a, .tweet_time a, .socialpic:after, .social_share_links a.socialsharing:hover, .comment-date a:hover, .cancel-comment-reply a:hover, a.comment-reply-link:hover, .spacing a:hover, .featured_text_quote_title a:hover {
	color:<?php echo ($color1); ?>;
	}
	
.button a, .button_reverse a:hover, input[type=submit] {
	background-color:<?php echo ($color1); ?>;
	color:#ffffff !important;
	}
	
.message_center_sermon .one_fourth .audio a, .message_center_sermon .one_fourth .pdf a, .message_center_sermon .one_fourth .video a, .sermon_index .audio a, .sermon_index .pdf a, .sermon_index .video a, .social_share_wrapper #audio a, .social_share_wrapper .pdf a, .social_share_wrapper ul li a {
	background-color:<?php echo ($color1); ?>;
	color:#ffffff;
	}
	
ul li, ul li a:hover, h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover, .sf-menu li a, #bottom_nav ul li a:hover, h1, h2, h3, h4, h5, h6, p, blockquote, .quote, .pullquoteleft, .pullquoteright, .intro, .meta a, .calendarday, .one_half, .one_half_first, .one_third, .one_third_first, .two_third, .two_third_first, .one_fourth, .one_fourth_first, .three_fourth, .three_fourth_first, .one_fifth, .one_fifth_first, .two_fifth, .two_fifth_first, .three_fifth, .three_fifth_first, .four_fifth, .four_fifth_first, .one_sixth, .one_sixth_first, .one_half a:hover, .one_half_first a:hover, .one_third a:hover, .one_third_first a:hover, .two_third a:hover, .two_third_first a:hover, .one_fourth a:hover, .one_fourth_first a:hover, .three_fourth a:hover, .three_fourth_first a:hover, .one_fifth a:hover, .one_fifth_first a:hover, .two_fifth a:hover, .two_fifth_first a:hover, .three_fifth a:hover, .three_fifth_first a:hover, .four_fifth a:hover, .four_fifth_first a:hover, .one_sixth a:hover, .one_sixth_first a:hover, .social_share_links a:hover, #countdownbox .textwidget h3 a:hover, #bottom_nav ul li a:hover, .collapseomatic_excerpt, .collapseomatic_content, p a:hover, #searchbox input, #searchbox input:focus, a:hover, .social_share_links a.socialsharing, .social_share_wrapper .audio, .social_share_wrapper .pdf, .social_share_wrapper .video, .comment_title, a.comment-reply-link, .commentlist p, .spacing a, .featured_text_quote_title a, ul.sf-menu li.current_page_item ul.sub-menu li a, div.wpcf7-validation-errors, div.wpcf7-mail-sent-ok, span.wpcf7-not-valid-tip { 
	color:<?php echo ($color2); ?>;
	}
	
.button_reverse a, .button a:hover, input[type=submit]:hover {
	background-color:<?php echo ($color3); ?>;
	color:#ffffff !important;
	}
	
.message_center_sermon .one_fourth .audio a:hover, .message_center_sermon .one_fourth .pdf a:hover, .message_center_sermon .one_fourth .video a:hover, .sermon_index .audio a:hover, .sermon_index .pdf a:hover, .sermon_index .video a:hover, .social_share_wrapper .audio a:hover, .social_share_wrapper .pdf a:hover, .social_share_wrapper .video a:hover, .social_share_wrapper ul li a:hover {
	background-color:<?php echo ($color3); ?>;
	color:#ffffff;
	text-decoration:none;
	}
	
.calendarmonth, .sf-menu li a:hover, ul.sf-menu li.current_page_item a, ul.sf-menu li ul.sub-menu li.current-menu-item a, #countdownbox .textwidget h3 a, ul.sf-menu li.current_page_item ul.sub-menu li a:hover {
	color:<?php echo ($color3); ?>;
	}
	
.eventmonth {
	background-color:<?php echo ($color3); ?>;
	}
	
.eventday {
	background-color:<?php echo ($color2); ?>;
	}
	
.meta, #bottom_nav ul li a, a.more-link:after, .datepic:after, .event_social_share_wrapper .socialpic:after, .da-thumbs li a div:after, .copyright_message, .copyright_message a, .time, .venue, #bottom_nav ul li a, ul.icons li a, .user, .searchme:after, .blog_left_light h5, .blog_right_light h5, .metacomments, .comment-date a, .cancel-comment-reply a, .sermon_deats {
	color:<?php echo ($color4); ?>;
	}
	
#main {
	background-image:url('<?php echo ($contentbgroundimg);?>');
	background-repeat:<?php echo ($contentrepeat); ?>;
	background-color:<?php echo ($contentbackgroundcolor);?>
	}
	
.slidertitle, ul.slides li .smallslidertitle, ul.slides li .smallslidertitle p, ul.slides li .smallslidertitle h1, ul.slides li .smallslidertitle h2, ul.slides li .smallslidertitle h3, ul.slides li .smallslidertitle h4, ul.slides li .smallslidertitle h5, ul.slides li .smallslidertitle h6, .smallslidertitle blockquote, .smallslidertitle .quote, .smallslidertitle .pullquoteleft, .smallslidertitle .pullquoteright, .smallslidertitle .intro, .smallslidertitle .one_half, .smallslidertitle .one_half_first, .smallslidertitle .one_third, .smallslidertitle .one_third_first, .smallslidertitle .two_third, .smallslidertitle .two_third_first, .smallslidertitle .one_fourth, .smallslidertitle .one_fourth_first, .smallslidertitle .three_fourth, .smallslidertitle .three_fourth_first, .smallslidertitle .one_fifth, .smallslidertitle .one_fifth_first, .smallslidertitle .two_fifth, .smallslidertitle .two_fifth_first, .smallslidertitle .three_fifth, .smallslidertitle .three_fifth_first, .smallslidertitle .four_fifth, .smallslidertitle .four_fifth_first, .smallslidertitle .one_sixth, .smallslidertitle .one_sixth_first, .smallslidertitle p, .smallslidertitle div.wpcf7-validation-errors, .smallslidertitle div.wpcf7-mail-sent-ok, .smallslidertitle span.wpcf7-not-valid-tip  {
	color:<?php echo ($color5); ?> !important;
	}
	


</style>



<!-- *************************************************************************
*****************              CUSTOM CSS              ********************
************************************************************************** -->
<style type="text/css">
<?php 
if ( function_exists( 'get_option_tree') ) {
  $css = get_option_tree( 'vn_custom_css' );
}
?>
    <?php echo ($css); ?>
</style>

</head>

<?php $theme_options = get_option('option_tree'); ?>

<body <?php body_class(); ?> onload="slider.init()">

<div id="mainSliderDrawer" class="sliderDrawer">
<?php

$defaults = array(
	'theme_location'  => 'primary',
	'menu_class'      => 'codySlider'
);

wp_nav_menu( $defaults );

?>
</div>

<div id="pageContent">

<div class="clear"></div>
  
<!-- Start of headerwrapper -->
<div class="headerwrapper">

<div class="topRightMenuWrapper">
	<div id="rightMenu">
		<div id="topRightMenu">
			<?php
			if ( is_home() || is_front_page() ) {
				?>

                                <script type="text/javascript">
                                    
								jQuery(document).ready(function($){
									var surl =  "https://www.healinghearts.org/ajaxson.php"; 

									$.ajax({
										url: surl, 
										data: {mode: 'enrolledusers'},
										dataType: "jsonp",
										jsonp : "callback",
										jsonpCallback: "jsonpcallbackEnrolledUsers"
									});
									
									$.ajax({
										url: surl, 
										data: {mode: 'usersloggedin'},
										dataType: "jsonp",
										jsonp : "callback",
										jsonpCallback: "jsonpcallbackUsersLoggedIn"
									});									
										 
								 });
 
								
								// Named callback function from the ajax call when jsonpbtn2 clicked
								function jsonpcallbackEnrolledUsers(rtndata) { 
									document.getElementById('spanEnrolledUsers').innerHTML = rtndata;
								}
								
								// Named callback function from the ajax call when jsonpbtn2 clicked
								function jsonpcallbackUsersLoggedIn(rtndata) { 
									document.getElementById('spanUsersLoggedIn').innerHTML = rtndata;
								}	
								                                                     
                                </script>
                                


				<div class="user-activity">Active &amp; Enrolled Users <strong><span id="spanEnrolledUsers">0</span></strong> | Users Logged In <strong><span id="spanUsersLoggedIn">0</span></strong></div>
				<?php
			}
			?>
			<?php
	
			$defaults = array(
				'theme_location'  => 'upperRight',
				'menu_class'      => 'sf-menu'
			);
			
			wp_nav_menu( $defaults );
			
			?>
			<hr class="clearer" />
		</div>
		<div id="verse">
			<h3 style="font-weight:bold;">
			"Binding up the brokenhearted"<br>
			<span id="smallVerse">Isaiah 61:1-4</span>
			</h3>
		</div>
	</div>	
</div> 

<!-- Start of nav wrapper -->
<div id="nav_wrapper">

<!-- Start of top logo -->
<div id="top_logo">
<a href="<?php bloginfo('siteurl'); ?>"><?php 
if ( function_exists( 'get_option_tree' ) ) {
$logopath = get_option_tree( 'vn_logo' );
} ?><img src="<?php echo $logopath; ?>" alt="logo" style="width:245px;" /></a>

</div><!-- End of top logo -->

<!-- Start of countdownbox -->
<div id="countdownbox">
<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('header_side') ) : else : ?>		
	<?php endif; ?>

</div><!-- End of countdownbox -->

<!-- Start of clear fix --><div class="clear"></div>

</div><!-- End of nav wrapper --> 

</div><!-- End of headerwrapper -->

<!-- Start of topmenu wrapper -->
<div id="topmenu_wrapper">

<!-- Start of topmenu -->
<nav id="topmenu">  
        <?php

		$defaults = array(
			'theme_location'  => 'primary',
			'menu_class'      => 'sf-menu'
		);
		
		wp_nav_menu( $defaults );
		
		?>

<div id="buttonHolder"><button id="sliderButton" onclick="slider.slideMenu()">Menu</button></div>

<!-- Start of clear fix --><div class="clear"></div>

</nav><!-- End of topmenu -->

</div><!-- End of topmenu wrapper -->